<style scoped>
.divNotice {
  padding: 5px 10px;
  border-radius: 5px;
  right: 25%;
  background: #ed4014;
  color: #ffffff;
  bottom: 10%;
  position: fixed;
  z-index: 999999;
  font-size: 24px;
}
</style>
<template>
  <Layout style="height: 100%" class="main">
    <Header class="header-con">
      <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">

        <user :message-unread-count="unreadCount" :user-avatar="userAvatar" :user-name="userName" />

        <!-- <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/> -->
        <error-store v-if="$config.plugin['error-store'] &&
          $config.plugin['error-store'].showInHeader
          " :has-read="hasReadErrorPage" :count="errorCount"></error-store>
        <!-- <fullscreen v-model="isFullscreen" style="margin-right: 10px" /> -->

      </header-bar>
    </Header>
    <Layout  style="height: 80%;">


      <Sider hide-trigger collapsible :width="240" :collapsed-width="64" v-model="collapsed" class="left-sider"
        :style="{ overflow: 'hidden' }">
        <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage"
          :menu-list="menuList">
          <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
          <!-- <div class="logo-con">
            <div class="div-title" v-show="!collapsed">{{ title }}</div>
            <img v-show="collapsed" :src="minLogo" key="min-logo" />
          </div> -->
        </side-menu>
      </Sider>
      <Layout>

        <Content class="main-content-con">
          <Layout class="main-layout-con">
            <div class="tag-nav-wrapper">
              <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
            </div>
            <Content class="content-wrapper">
              <keep-alive :include="cacheList">
                <router-view :key="$route.path" />
              </keep-alive>
              <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
            </Content>
            <Footer>{{copyright}}</Footer>
          </Layout>
        </Content>
      </Layout>
      
    </Layout>
   
  </Layout>
</template>
<script>
import { title, copyright, systemname } from '@/libs/util'
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.png' 
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data() {
    return {
      copyright,
      collapsed: false,
      minLogo, 
      isFullscreen: false,
      title: '',
    }
  },

  computed: {
    ...mapGetters(['errorCount']),

    tagNavList() {
      return this.$store.state.app.tagNavList
    },
    tagRouter() {
      return this.$store.state.app.tagRouter
    },
    userAvatar() {
      return this.$store.state.user.userName
    },
    userName() {
      return this.$store.state.user.userName
    },

    cacheList() {
      const list = [
        'ParentView',
        ...(this.tagNavList.length
          ? this.tagNavList
            .filter((item) => !(item.meta && item.meta.notCache))
            .map((item) => item.name)
          : [])
      ]
      return list
    },
    menuList() {
      return this.$store.getters.menuList
    },
   
    local() {
      return this.$store.state.app.local
    },
    hasReadErrorPage() {
      return this.$store.state.app.hasReadErrorPage
    },
    unreadCount() {
      return this.$store.state.user.unreadCount
    }

  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag'
    ]),
    ...mapActions(['handleLogin']),
    turnToPage(route) {
     
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCollapsedChange(state) { 
      this.collapsed = state
    },
    handleCloseTag(res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {  
          this.turnToPage({
            name: this.$config.homeName, 
          })
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route)
          }
        }
      }
      this.setTagNavList(res)
    },
    handleClick(item) {
      this.turnToPage(item)
    },
    

  },
  watch: {
    $route(newRoute) {
      const { name, query, params, meta } = newRoute
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      this.$refs.sideMenu.updateOpenName(newRoute.name)
    }
  },
  mounted() {
    this.title = sessionStorage.getItem('globalTitle')
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList()
    this.setHomeRoute(routers)
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    this.setBreadCrumb(this.$route)
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find((item) => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      })
    }
  }
}
</script>
